<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../../css/public.css" />
    <link rel="stylesheet" href="../../css/swiper.css">

    <style>
        #content {
		width: 100%;
		height: 100%;
		background-color: #FFF;
	}

	.swiperBox {
		width: 100%;
		height: 300px;
		position: relative;
		/* background-color: #B6ADFE; */
	}

	.swiperBox .more {
		position: absolute;
		right: 20px;
		top: 30px;
		width: 20px;
		height: 5px;
		z-index: 99999;
	}

	.swiperBox .onLine {
		width: 40px;
		height: 14px;
		position: absolute;
		bottom: 20px;
		right: 20px;
		z-index: 99999;
		border-radius: 7px;
		color: #FFF;
		font-size: 10px;
		background: rgba(0, 0, 0, 0.26);
	}

	.swiperBox .onLine .circle {
		width: 5px;
		height: 5px;
		background: #00DECA;
		border-radius: 50%;
	}

	.swiper {
		width: 100%;
		height: 100%;
		--swiper-pagination-color: #1a92ca;
	}

	.swiper-container {
		width: 100%;
		height: 100%;
		--swiper-pagination-color: #1a92ca;
	}

	/* .swiper-wrapper {
		width: 100%;
		height: 100%;
	} */


	.swiper-slide {
        background-color: #979DBE;
		width: 100%;
		height: 300px;
		cursor: pointer;
		position: relative;
        text-align: center;
	}

	.swiper-slide img {
         width: 100%;
		height: 100%;
        object-fit: cover;
	}

	.imgsList {
		width: 80%;
		height: 30px;
		position: absolute;
		bottom: 20px;
		left: 20px;
		z-index: 99;
	}

	.imgsList img {
		width: 30px;
		height: 30px;
		margin-right: 10px;
        object-fit: cover
	}

	.Img {
		width: 30px;
		height: 30px;
		border-radius: 8px;
        border: 2px solid #fff;

	}

	.ActiveImg {
		width: 30px;
		height: 30px;
		border: 2px solid #fff;
        border-radius: 8px;
	}

	.bottBox {
		width: 100%;
		height: calc(100% - 300px);
		background-color: #FFF;
	}

	.bottBox .top {
		width: calc(100% - 36px);
		height: 60px;
		padding: 0 18px;
		font-size: 18px;
		color: #2D3146;
		font-weight: bold;
		background-color: #FFF;
	}

	.bottBox .top .top_b {
		width: 70%;
		height: 15px;
	}

	.top_b .one {
		width: 30px;
		height: 100%;
		background: #FFEBF4;
		border-radius: 5px;
		font-size: 10px;
		color: #F85999;
	}

	.top_b img {
		width: 70px;
		height: 100%;
	}

	.news {
		width: calc(100% - 36px);
		padding: 0 18px;

		font-size: 13px;
		color: #333;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.newBott {
		width: 100%;

		margin-top: 13px;
	}

	.newBott .oneTop {
		width: 100%;

	}

	.newBott .oneTop .one {
		width: 28.5%;
		height: 50px;
		border-radius: 5px;
		background: #FAFAFC;
        padding-left:10px;
        padding-top: 3px;
        margin-bottom: 8px;
        
	}

	.vioce {
		width: calc(100% - 36px);
		padding: 0 18px;
		
		font-size: 13px;
		color: #333333;
		font-weight: bold;
		margin-bottom: 30px;
	}

	.vioce .img {
		width: 83px;
		height: 30px;
		margin-top: 10px;
		position: relative;
	}

	.vioce .img img {
		width: 83px;
		height: 28px;
	}

	.vioce .num {
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translate(0, -50%);
		color: #FFF;
		font-size: 13px;
	}

	.nameOne {
		width: calc(100% - 36px);
		padding: 0 18px;
		height: 50px;
		font-size: 13px;
		color: #333333;
	}

	.nameOne p {
		font-weight: bold;
	}

	.nameOne .txt {
		margin-top: 5px;
		text-indent: 2em;
	}

	.foot {
		width: calc(100% - 36px);
		padding: 0 18px;
		height: 64px;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.foot .one {
		font-size: 12px;
		color: #FFFFFF;
		padding: 13px 44px;
		background: linear-gradient(90deg, #FD49da 0%, #FBA66E 100%);
		border-radius: 20px;
	}

	.foot .one img {
		width: 17px;
		height: 14px;
		margin-right: 5px;
	}

	.foot img {
		width: 44px;
		height: 44px;
	}
    .voice-icon{
        height: 30px;
        background: url('../../image/img/contact/vioces.png') no-repeat;
        background-size: 100%;
    }
    .flex_column_arounds{ 
        display: flex;
        flex-wrap:wrap;
        align-content:flex-start;
        /* flex-direction: column; */
        justify-content:space-between
        
    }
    /* .voice-play-icon{width: 83px;height: 28px;background-image: url('../../image/img/contact/vioce.png');background-repeat: no-repeat;} */
    .voice-play-icon {
    background-image: url('../../image/img/contact/vioce.png');
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 28px;
    width: 83px;
    
}
    .voice-play-icon.active {
    border: 1px solid #7338d8;
    background-image: url('../../image/icon/audio_play_placeholder.png');
    background-size: auto 55%;
    background-repeat: no-repeat;
    background-position: 5px center;
    height: 20px;
    width: 70px;
    box-sizing: border-box;
    border-radius: 10px;
    margin-top: 7px;
    animation-name: voice;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    background-position: center;
    /* background-repeat: repeat-x; */
}

@keyframes voice {
    0% {
        /* background-position: -100% center; */
        background-size: 80% 55%;
    }

    100% {
        /* background-position: 200% center; */
        background-size: 50% 55%;
    }
}
    </style>
</head>

<body>
    <div id="view" v-cloak>
        <div id="content">
        <div class="swiperBox">
            <div class="swiper-container" v-if="data.photo_show && data.photo_show.length>0">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(m ,index) in data.photo_show" :key="index">
                        <img  @click="_url({uid:touserid, iIndex:index, showZan:1,  slide:1}, 'frame0/img_win')" :src="returnImg(m)" onerror="this.src='../../image/touxiang.png'" alt="">
                    </div>
                </div>
            </div>

            <div class="imgsList">
                <img :src="returnImg(item)" onerror="this.src='../../image/touxiang.png'" alt="" class="ImgSS" :data-index="index" :class="current==index?'ActiveImg':'Img'"
                    v-for="(item,index) in data.photo_show" :key="index">
            </div>

            <img src="../../image/img/contact/more.png" alt="" class="more" onclick="_more()">

            <div class="onLine flex_around" v-if="data.is_online">
                <div class="circle"></div>
                <p>在线</p>
            </div>
        </div>
        <div class="bottBox flex_column">
            <div class="top flex_column_around">
                <p>{{data.name}}<span style="margin-left: 10px;font-size: 12px;color: #979DBE;">{{ data.city }}</span></p>
                <div class="top_b flex">
                    <div class="one flex_around">
                        <img src="../../image/img/contact/women.png" v-if="data.sex == '女'" alt="" style="width: 8px;height: 8px;">
                        <img src="../../image/img/contact/men.png" v-else alt="" style="width: 8px;height: 8px;">
                        <p>{{data.age}}</p>
                    </div>
                    <span v-if="rzInfo.real_auth"><img src="../../image/img/contact/zhenren.png" v-if="rzInfo.real_auth.status==2" alt="" style="margin: 0 8px;"></span>
                    <span v-if="rzInfo.name_auth">
                    <img src="../../image/img/contact/shiming.png" v-if="rzInfo.name_auth.status==2" alt=""></span>
                </div>
            </div>


            <div class="news flex_column">
                <p style="font-weight: bold;">个人信息</p>
                <div class="newBott ">
                    <div class="oneTop flex_column_arounds">
                        <div class="one flex_column_around" v-if="data.sex">
                            <p style="font-size: 10px;color: #979DBE;">性别</p>
                            <p style="font-size: 13px;font-weight: bold;">{{data.sex}}</p>
                        </div>
                        <div class="one flex_column_around" v-if="data.age">
                            <p style="font-size: 10px;color: #979DBE;">年龄</p>
                            <p style="font-size: 13px;font-weight: bold;">{{data.age}}</p>
                        </div>
                        <div class="one flex_column_around" v-if="data.emotion">
                            <p style="font-size: 10px;color: #979DBE;">情感</p>
                            <p style="font-size: 13px;font-weight: bold;">{{ data.emotion }}</p>
                        </div>
                    
                        <div class="one flex_column_around" v-if="data.stature">
                            <p style="font-size: 10px;color: #979DBE;">身高</p>
                            <p style="font-size: 13px;font-weight: bold;">{{ data.stature }}cm</p>
                        </div>
                        <div class="one flex_column_around" v-if="data.weight">
                            <p style="font-size: 10px;color: #979DBE;">体重</p>
                            <p style="font-size: 13px;font-weight: bold;">{{ data.weight }}kg</p>
                        </div>
                        <div class="one flex_column_around" v-if="data.education_background">
                            <p style="font-size: 10px;color: #979DBE;">学历</p>
                            <p style="font-size: 13px;font-weight: bold;">{{ data.education_background }}</p>
                        </div>
                    
                        <div class="one flex_column_around" v-if="data.occupation">
                            <p style="font-size: 10px;color: #979DBE;">职业</p>
                            <p style="font-size: 13px;font-weight: bold;">{{ data.occupation }}</p>
                        </div>
                        <div class="one flex_column_around" v-if="data.monthly_salary">
                            <p style="font-size: 10px;color: #979DBE;">收入</p>
                            <p style="font-size: 13px;font-weight: bold;">{{ data.monthly_salary }}</p>
                        </div>
                        <div class="one flex_column_around">
                            <p style="font-size: 10px;color: #979DBE;">ID</p>
                            <div class="bot flex">
                                <p style="font-size: 13px;font-weight: bold;">{{data.id}}</p>
                                <img src="../../image/img/contact/copy.png" alt=""
                                    style="width: 11px;height: 11px;margin-left: 5px;" @click="copyTxt(data.id)">
                            </div>
                        </div>
                    </div>
                </div>

            </div>


            <div class="vioce flex_column">
                <p>声音展示</p>
                <!-- <div class="img" onclick="playVoice()" :class="{'voice-icon':vplay==1}"> -->
                    <div class="voice-play-icon" onclick="playVoice()" :class="{'active':vplay==1}">
                    <!-- <span v-if="vplay==1"></span>
                    <img src="../../image/img/contact/vioce.png" alt="" v-else> -->
                    <!-- <img src="../../image/img/contact/vioce.png"> -->
                    <p class="num">{{data.voice_time}}</p>
                </div>
            </div>

            <div class="nameOne flex_column">
                <p>个性签名</p>
                <div class="txt">
                    {{data.slogan}}
                </div>
            </div>
            <div class="nameOne flex_column" style="height: 100px;">
                
            </div>
        </div>


        <div class="foot flex_between">
            <div class="one flex" onclick="openChat()">
                <img src="../../image/img/contact/hurt.png" alt="">
                <p>搭讪</p>
            </div>

            <img src="../../image/img/contact/chat.png" alt="" onclick="openChat()">
            <img src="../../image/img/contact/tel.png" alt="" onclick="openChat()">
            <img src="../../image/img/contact/look.png" alt="" onclick="guanzhu()" v-if="!data.love">
            <img src="../../image/img/contact/ylook.png" alt="" onclick="guanzhu()" v-else>
        </div>


        

    </div>






















        
    </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/jquery.js"></script>
<script src="../../script/ffkj.js"></script>
<script src="../../script/limitchat.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/swiper.js"></script>
<script src="../../script/uinfos.js"></script>
<script src="../../script/audio.js"></script>

<script>
    var myuserid;
    var touserid;
    var audio;
    var view = new Vue({
        el: '#view',
        data: {
            imgurl: imgurl,
            ffList: [],
            data: {},
            touserid: '',
            myuserid: '',
            isVip: $api.getStorage('isVip'),
            showshouhu: false,
            car: '',
            ios: 1, // 1上架 0非上架
            myInfo: {}, // 获取自己用户资料
            vplay: 0, // 0 未播放 1播放中
            configInfo: {},
            dyObj: {
                page: 0,
                last: 0
            },
            rzInfo: [], // 认证情况
            dyList: [],
            photo: [],
            gCover: '', // 心动礼物
            current: 0,
			current1: 0,

        },
        methods: {
            copyTxt(text) {
                copyTxt(text);
            },
            // 举报
            more(index) {
                more(index)
            },
            // 约会报名
            joinEnroll(id, index) {
                joinEnroll(id, index)
            },
            // 点赞
            zan(id, index, type) {
                zan(id, index, type)
            },
            // 评论
            addComment(dy_id, uid) {
                addComment(dy_id, uid)
            },
            // 发布评论
            send() {
                send()
            },
            openLM() {
                openLM(touserid);
            },
            openVideoChat() {
                openVideoChat(touserid);
            },
            copyTxt(text) {
                copyTxt(text)
            },
            _url(param, url) {
                _url(param, url);
            },
            // 返回图片路径
            returnImg(url) {
                return returnImg(url);
            },

            showDetail(url, data, topH, footerH) {
                showDetail(url, data, topH, footerH)
            },

        }
    });
    
    apiready = function() {
        audio = new Audio();
        $api.fixStatusBar($api.dom('header'));
        view.ios = $api.getStorage('shang');
        view.myuserid = $api.getStorage('userid');
        myuserid = $api.getStorage('userid');
        touserid = api.pageParam['user_id'];
        view.touserid = api.pageParam['user_id'];
        getInfo()
        _heibai(1);
        // 礼物赠送 更新用户资料
        _listener('updateGift', function() {
            getInfo()
        })

        _listener('newmsg', function(ret) {
            var result = ret.value.data;
            showMsgFrm(result);
            var data = result.new[0];
            if (data.userid == $api.getStorage('userid') && data.self == 1 && data.type == 8) {
                view.gCover = data.data.cover;
                setTimeout(function() {
                    view.gCover = ''
                }, 6000)
            }
        })

        getDY(0);
        $('#js-dt').on('scroll', function() {
            var w = $('#js-dt').innerWidth();
            var l = $('#js-dt').scrollLeft();
            if (l + 20 > w && view.dyObj.last == 0) {
                view.dyObj.page++;
                getDY(view.dyObj.page);
            }
        })

        $(window).on('scroll', function() {
            topNavScroll();
        });

    }


    // 关注
    function guanzhu() {
        var msg = view.data.love == 0 ? '关注成功' : '取消关注';
        _ajax('api/user/attention', function(ret, err) {
            console.log(JSON.stringify(ret));
            if (ret && ret.code == 200) {
                _msg(msg);
                view.data.love = view.data.love == 0 ? 1 : 0;
                pushMsg(touserid);
            }
        }, {
            user_id: myuserid,
            to_user: touserid,
        })
    }

    // 更多
    function _more() {
        // if (view.data.love) {
        //     var buttons = ['取消关注', '拉黑', '举报'];
        // } else {
        //     var buttons = ['关注', '拉黑', '举报'];
        // }
        // var buttons = ['推荐给朋友', '举报', '拉黑'];
        var lhTxt = view.data.pull_black == 1 ? '移出黑名单' : '拉黑';
        var buttons = ['举报', lhTxt];
        var keyArr = [2, 3];
        _action('', buttons, function(bindex) {
            if (bindex != (buttons.length + 1)) {
                var index = keyArr[bindex - 1];
                if (index == 1) {
                    // guanzhu()
                } else if (index == 2) {
                    // 举报
                    _url({
                        url: 'frame0/ju_bao_frame',
                        title: '匿名举报',
                        uid: touserid
                    })
                } else if (index == 3) {
                    _addBlack(view.touserid, function(type) {
                        if (type == 1) {
                            timerWin();
                        }
                    })
                }
            }
        })
    }

    // 私聊
    function openChat() {
        checkChat(view.touserid, function() {
            // view.data.link = 1;
            _url({
                touserid: view.data.id,
                title: '与' + view.data.name + '的聊天',
                moreType: 1
            }, 'frame0/liaotian_win')
        })
    }

    // 社交账号
    function showLink(type) {
        judgeLinkQx(view.touserid, function() {
            switch (type) {
                case 1:
                    view.data.wechat_link = 1;
                    break;
                case 2:
                    view.data.qq_link = 1;
                    break;
                default:
                    view.data.phone_link = 1;
                    break;
            }
        }, type)
    }

    var dashanIndex = 0;
    // 心动
    function dashan() {
        if (dashanIndex == 1) return;
        dashanIndex = 1;
        _ajax('api/privatechat/greet', function(ret, err) {
            _msg(ret.msg);
        }, {
            user_id: $api.getStorage('userid'),
            id: view.touserid,
        })
    }

    // 语音点赞
    function dianzan() {
        _ajax('api/user/voiceLike', function(ret, err) {
            _msg(ret.msg);
            if (ret && ret.code == 200) {
                view.data.had_voice_zan = 1;
                view.data.voice_zan++;
            }
        }, {
            user_id: $api.getStorage('userid'),
            to_user: view.touserid,
        })
    }
</script>

</html>